<template>
  <div>
    <!-- 上面导航 -->
    <van-search
      class="nav-top"
      v-model="value"
      placeholder="请输入搜索关键词"
      id="serch_shop"
    />
    <!-- 左侧导航 -->
    <van-sidebar v-model="activeKey" class="nav-left">
      <van-sidebar-item
        v-for="item in title"
        :key="item.id"
        :title="item.title"
        @click="change(item.id)"
      />
    </van-sidebar>
    <!-- 右侧内容 -->
    <div class="content">
      <!-- 轮播图 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in swiper" :key="item"
          ><img :src="item" class="img"
        /></van-swipe-item>
      </van-swipe>
      <!-- 每一条分类 -->
      <div class="list">
        <div
          class="q1"
          v-for="item in list"
          :key="item.id"
          @click="fenxiang(item.id)"
        >
          <img :src="item.icon" class="img1" />
          <p class="p">{{ item.name }}</p>
        </div>
      </div>
      <div class="q2"></div>
    </div>
    <Button />
  </div>
</template>
<script>
import Button from "../../components/nav/button-nav";
export default {
  components: {
    Button,
  },
  data() {
    return {
      activeKey: 0,
      title: [],
      swiper: [],
      IconList: [],
      index: 0,
      value: "",
    };
  },
  computed: {
    list() {
      var res = [];
      if (this.value == "") {
        if (this.index == 0) {
          res = this.IconList;
        } else {
          res = this.IconList.slice(
            (this.index - 1) * 7,
            (this.index - 1) * 7 + 7
          );
        }
        return res;
      } else {
        if (this.index == 0) {
          res = this.IconList.filter((item) => {
            return item.name.includes(this.value);
          });
          return res;
        } else {
          res = this.IconList.slice(
            (this.index - 1) * 7,
            (this.index - 1) * 7 + 7
          );
          return res;
        }
      }
    },
  },
  mounted() {
    this.$API.dao().then((res) => {
      this.title = res.data.data;
      this.swiper = res.data.swiper;
    });
    this.$API.list().then((res) => {
      this.IconList = res.data.data;
    });
  },
  methods: {
    change(i) {
      this.index = i;
    },
    fenxiang(id) {
      this.$router.push({ path: "/fenxiang", query: { id: id } });
    },
  },
};
</script>
<style  scoped>
.nav-top {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
}
.nav-left {
  position: fixed;
  top: 56px;
  left: 0;
}
.content {
  width: 75%;
  height: 900px;
  margin-left: 80px;
  padding-top: 0.1px;
}
.my-swipe {
  width: 220px !important;
  height: 130px;
  margin-left: 40px;
  margin-top: 75px;
}
.img {
  width: 220px;
  height: 130px;
}
.list {
  width: 100%;
  margin-top: 10px;
  margin-left: 5px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.q1 {
  width: 80px;
  margin-top: 10px;
  height: 120px;
}
.p {
  text-align: center;
  line-height: 0px;
  font-size: 13px;
}
.img1 {
  width: 100%;
  height: 80px;
}
.q2 {
  height: 10px;
  margin-top: 60px;
}
</style>